.dx-size-default() {
    @GENERIC_RADIOBUTTON_SIZE: 22px;
    @GENERIC_RADIOBUTTON_DOT_SIZE: 10px;
}

.dx-size-compact() {
    @GENERIC_RADIOBUTTON_SIZE: 16px;
    @GENERIC_RADIOBUTTON_DOT_SIZE: 8px;
}

@GENERIC_RADIOBUTTON_BORDER_WIDTH: 1px;
@GENERIC_RADIOBUTTON_INNER_SIZE: @GENERIC_RADIOBUTTON_SIZE - @GENERIC_RADIOBUTTON_BORDER_WIDTH * 2;

.dx-radiobutton-icon {
    width: @GENERIC_RADIOBUTTON_SIZE;
    height: @GENERIC_RADIOBUTTON_SIZE;
}

.dx-radiobutton-icon:before {
    display: block;
    width: @GENERIC_RADIOBUTTON_INNER_SIZE;
    height: @GENERIC_RADIOBUTTON_INNER_SIZE;
    border: @GENERIC_RADIOBUTTON_BORDER_WIDTH solid @radiogroup-border-color;
    background-color: @radiogroup-bg;
    content: "";
    .border-radius(@GENERIC_RADIOBUTTON_SIZE / 2);
    .box-sizing(content-box);
}

.dx-radiobutton-checked .dx-radiobutton-icon-dot {
    display: block;
    margin-top: -@GENERIC_RADIOBUTTON_SIZE / 2 - @GENERIC_RADIOBUTTON_DOT_SIZE / 2;
    margin-left: @GENERIC_RADIOBUTTON_SIZE / 2 - @GENERIC_RADIOBUTTON_DOT_SIZE / 2;
    width: @GENERIC_RADIOBUTTON_DOT_SIZE;
    height: @GENERIC_RADIOBUTTON_DOT_SIZE;
    background: @radiogroup-checked-bg;
    content: "";
    .border-radius(@GENERIC_RADIOBUTTON_DOT_SIZE / 2);
}

.dx-radiobutton {
    line-height: @GENERIC_RADIOBUTTON_SIZE;

    &.dx-state-readonly {
        .dx-radiobutton-icon:before {
            border-color: @radiogroup-readonly-border-color;
            background-color: @radiogroup-readonly-bg;
        }
    }

    &.dx-state-hover {
        .dx-radiobutton-icon:before {
            border-color: @radiogroup-hover-border-color;
        }
    }

    &.dx-state-active {
        .dx-radiobutton-icon:before {
            background-color: @radiobutton-active-bg;
        }
    }

    &.dx-state-focused {
        .box-shadow(none);

        &:not(.dx-state-active) {
            .dx-radiobutton-icon:before {
                border: @GENERIC_RADIOBUTTON_BORDER_WIDTH solid @radiobutton-focused-border-color;
            }
        }
    }
}

.dx-invalid {
    .dx-radiobutton-icon:before {
        border-color: @radiobutton-invalid-faded-border-color;
    }

    .dx-state-hover {
        &.dx-radiobutton .dx-radiobutton-icon:before {
            border-color: @radiobutton-invalid-hover-border-color;
        }
    }

    .dx-state-focused {
        &.dx-radiobutton {
            .dx-radiobutton-icon:before {
                border-color: @radiobutton-invalid-focused-border-color;
            }
        }
    }
}

.dx-rtl .dx-radiobutton,
.dx-rtl.dx-radiobutton {
    &.dx-radiobutton-checked .dx-radiobutton-icon-dot {
        margin-right: @GENERIC_RADIOBUTTON_INNER_SIZE / 4 + @GENERIC_RADIOBUTTON_BORDER_WIDTH;
        margin-left: 0;
    }
}
